<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        React: { useMemo },
        WebChat: {
          hooks: { useDirection }
        }
      } = window;

      run(async function () {
        WebChat.renderWebChat(
          {
            directLine: await testHelpers.createDirectLineWithTranscript([
              {
                from: {
                  role: 'bot'
                },
                id: 'a-00000',
                timestamp: 0,
                type: 'message',
                text: 'This is compleded feedback action example.',
                entities: [
                  {
                    '@context': 'https://schema.org',
                    '@id': '',
                    '@type': 'Message',
                    type: 'https://schema.org/Message',
                    keywords: ['AIGeneratedContent', 'AllowCopy'],
                    potentialAction: [
                      {
                        '@type': 'LikeAction',
                        actionStatus: 'CompletedActionStatus',
                        target: {
                          '@type': 'EntryPoint',
                          urlTemplate: 'ms-directline://postback?interaction=like'
                        }
                      },
                      {
                        '@type': 'DislikeAction',
                        actionStatus: 'PotentialActionStatus',
                        result: {
                          '@type': 'Review',
                          reviewBody: "I don't like it.",
                          'reviewBody-input': {
                            '@type': 'PropertyValueSpecification',
                            valueMinLength: 3,
                            valueName: 'reason'
                          }
                        },
                        target: {
                          '@type': 'EntryPoint',
                          urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}'
                        }
                      }
                    ]
                  }
                ]
              },
              {
                from: {
                  role: 'bot'
                },
                id: 'a-00002',
                timestamp: 0,
                type: 'message',
                text: "Hi! I'm *Cody*, the devbot. How can I help?",
                entities: [
                  {
                    '@context': 'https://schema.org',
                    '@id': '',
                    '@type': 'Message',
                    type: 'https://schema.org/Message',
                    keywords: [],
                    potentialAction: [
                      {
                        '@type': 'LikeAction',
                        actionStatus: 'PotentialActionStatus',
                        target: {
                          '@type': 'EntryPoint',
                          urlTemplate: 'ms-directline://postback?interaction=like'
                        }
                      },
                      {
                        '@type': 'DislikeAction',
                        actionStatus: 'PotentialActionStatus',
                        result: {
                          '@type': 'Review',
                          reviewBody: "I don't like it.",
                          'reviewBody-input': {
                            '@type': 'PropertyValueSpecification',
                            valueMinLength: 3,
                            valueName: 'reason'
                          }
                        },
                        target: {
                          '@type': 'EntryPoint',
                          urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}'
                        }
                      }
                    ]
                  }
                ]
              }
            ]),
            styleOptions: {
              feedbackActionsPlacement: 'activity-actions'
            },
            store: testHelpers.createStore()
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await host.snapshot('local');

        pageElements.sendBoxTextBox().focus();
        await host.sendShiftTab(3);

        await host.sendKeys('ENTER');

        // Wait for 400 ms for the tooltip to show up.
        await new Promise(resolve => setTimeout(resolve, 400));

        await host.snapshot('local');
        await host.sendKeys('SPACE');
        await host.snapshot('local');
        await host.sendKeys('TAB');
        await host.snapshot('local');
        await host.sendKeys('SPACE');
        await host.snapshot('local');
      });
    </script>
  </body>
</html>
